<template>
  <w-modal ref="WModal" :title="title" @ok="okBtnClick">
    <a-form :form="form" :label-col="{ span: labelSpan }" :wrapper-col="{ span: wrapperSpan }">
      <slot />
    </a-form>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import WModal, { ModalComType } from "@/components/global/modal";
import { WrappedFormUtils } from "ant-design-vue/types/form/form";

@Component({
  name: "ComGlobalModel",
  components: {
    WModal,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
})
export default class Com extends Vue {
  @Prop({ type: String, default: "" }) title!: string;
  @Prop({ type: Array, default: () => [2] }) span!: Array<number>;
  @Prop({ type: Function, default: () => {} }) successFunc!: (
    values: any
  ) => Promise<any>;

  form!: WrappedFormUtils;

  get labelSpan() {
    return this.span[0];
  }

  get wrapperSpan() {
    return this.span.length === 1 ? 24 - this.span[0] : this.span[1];
  }

  /**
   * 显示
   */
  show() {
    (this.$refs.WModal as ModalComType).show();
  }

  showLoading() {
    (this.$refs.WModal as ModalComType).showLoading();
  }

  hideLoading() {
    (this.$refs.WModal as ModalComType).hideLoading();
  }

  /**
   * 确定按钮点击
   */
  okBtnClick() {
    this.showLoading();
    this.form.validateFields((err, values) => {
      if (err) {
        this.$emit("checkErr", err);
        this.hideLoading();
      } else {
        this.successFunc(values)
          .then(() => {
            (this.$refs.WModal as ModalComType).close();
            this.$message.success("成功");
          })
          .finally(() => {
            this.hideLoading();
          });
      }
    });
  }
}
</script>

<style scoped></style>
